<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 后台管理开发框架</title>
<link href="/favicon.ico" rel="icon">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="/static/admin/layui/css/layui.css" rel="stylesheet" type="text/css" />
<link href="/static/admin/css/style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- // 重定位Style -->
<style>
    html, body,.layui-fluid, .layui-card,.layui-card-body,.layui-col-md3,.layui-col-md9 {
        height: 98%;
    }
    .layui-card-header.layuiadmin-card-header-auto {
        border-bottom: 0px;
        padding-bottom: 0px;
    }
    .layui-form-item .layui-input-inline .layui-form-radio {
        margin-right: 1px;
    }
</style>

<!-- // 展示数据 -->
<div class="layui-fluid">
    <div class="layui-card">
        <!-- // 默认操作按钮 -->
        <div class="layui-card-header layuiadmin-card-header-auto ">
        <div class="layui-form">
            <div class="layui-form-item">
            <div class="layui-inline" >
                <!-- // 打开添加页面 -->
                <button class="layui-btn icon-btn" lay-open="" lay-title="添加分组" lay-area="500px" lay-url="#editforms" lay-callback="group" >
                    <i class="layui-icon layui-icon-add-1"></i>添加
                </button>         
            </div>
            </div>
        </div>   
        </div>

        <!-- // 创建数据实例 -->
        <table id="lay-tableList" lay-filter="lay-tableList"></table>        
    </div>
</div>

<!-- // 添加编辑数据 -->
<script type="text/html" id="editforms" >
<div class="layui-fluid layui-bg-white" >
    <form class="layui-form layui-form-fixed" lay-filter="editforms" >
    <input type="text" name="id" hidden="">
    <input type="text" name="pid" value="#" hidden="">
    <input type="text" name="app_id" value="{$app_id}" hidden="">
    <input type="text" name="sort" hidden=""> 

    <div class="layui-form-item">
        <label class="layui-form-label"><font color="red">* </font>上级分组</label>
        <div class="layui-input-block">
            <div class="pid" name="pid" ></div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><font color="red">* </font>分组名称</label>
        <div class="layui-input-block">
            <input name="name" placeholder="请填写分组名称" type="text" class="layui-input"   lay-verify="required" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><font color="red">* </font>排序</label>
        <div class="layui-input-block">
            <input name="sort" placeholder="默认自动生成" type="number" class="layui-input"  />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">分组说明</label>
        <div class="layui-input-block">
            <textarea name="content" id="content" cols="30" rows="10" style="min-height: 60px;" 
            placeholder="请输入分组说明" class="layui-textarea" ></textarea>
        </div>
    </div>

    <div class="layui-footer layui-form-item layui-center"  >
        <button class="layui-btn layui-btn-primary" type="button" pa-event="closePageDialog" >取消</button>
        <button class="layui-btn" lay-add="{:url('/system.api/groupAdd')}" lay-edit="{:url('/system.api/groupEdit')}" 
        lay-filter="submitPage"  lay-submit>提交</button>
    </div>
    </form>
</div>
</script>

<!-- // 列表编辑框 -->
<script type="text/html" id="tableBar"> 
    <a class="layui-table-text" lay-title="编辑 {{d.name}}" lay-url="#editforms" lay-area="500px" lay-callback="group" lay-event="edit" >编辑</a>
	<div class="layui-divider layui-divider-vertical"></div>
    <a class="layui-table-text" lay-url="{:url('/system.api/groupDel/')}app_id/{$app_id}/id/{{d.id}}" lay-event="del" >删除</a>
</script>
<script src="/static/admin/layui/layui.js?v=1.0.0"></script>
<script src="/static/admin/js/common.js?v=1.0.0"></script>
<script src="/static/admin/module/xmselect/xmselect.js"></script>
<script>
    layui.use(['admin','table','treetable'], function () {

        var admin = layui.admin;  
        var table = layui.table;  
        var jquery = layui.jquery;  
        var form = layui.form;  
        var treetable = layui.treetable;

        // 渲染初始化表格
        var renderTable = function() {
	        var isTable = treetable.render({
	            elem: '#lay-tableList',
	            treeColIndex: 1,
	            treeSpid: 0,
	            treeIdName: 'id',
	            treePidName: 'pid',
	            url: "{:url('/system.api/group')}?app_id={$app_id}",
	            cellMinWidth: 100,
	            cols: [[
	                {type: 'numbers',width: 60,title: '序号'},
	                {field: 'name', align: 'left', title: '分组名称'},
	                {field: 'sort', align: 'center',width: 100, title: '分组排序'},
	                {field: 'createtime', align: 'center', width: 160,title: '创建时间'},
	                {align: 'center', toolbar: '#tableBar',width: 130, title: '操作'},
	            ]]
	        });
    	}

	   	renderTable();
        // 编辑回调函数
        admin.callback.group = function(clickthis,colletction,config) {

            var tableThis = colletction.tableThis;
            var checkedId = [];
            if (typeof(tableThis) !== "undefined") {
                if (tableThis.data.pid !== 0) {
                    checkedId.push(tableThis.data.pid);
                }
            }

            // 初始化API分组
            var select = xmSelect.render({
                el: '.pid',
                tips: '请选择上级分组',
                name: 'pid',
                data: table.cache.group,
                radio: true,
                clickClose: true,
                initValue: checkedId,
                prop: {
                    value: 'id',
                    name:'name'
                },
                tree: {
                    show: true,
                    strict: false,
                    showLine: false,
                    clickExpand: false,
                },
                model: { 
                    icon: 'hidden',
                    label: { 
                        type: 'text' 
                    } 
                },
                theme: {
                    color: '#1890FF'
                }
            })

 			// 监听提交
            form.on("submit(submitPage)",function(post) {

                var pageThat = jquery(this);
                pageThat.attr("disabled",true);
                 // 获取提交地址
                if (typeof(tableThis) !== 'undefined') {
                    _pageUrl = tableThis.event === 'edit' ? pageThat.attr('lay-edit') : pageThat.attr('lay-add');
                }else {
                     _pageUrl = pageThat.attr('lay-add');
                }
                
                if (typeof(_pageUrl) === 'undefined') {
                    layui.iziToast.info({
                        message: '按钮缺少 url 属性',
                    });   
                    return false;
                }
                
                // 开始POST提交数据
                jquery.post(_pageUrl, 
                    post.field, function(res){
                        if (res.code == 200) {
                            layui.iziToast.success({
                                message: res.msg,
                            });  
                            // 更新列数据
                            if (typeof(tableThis) !== 'undefined') {
                                if (tableThis.event === 'edit')
                                    tableThis.update(JSON.parse(JSON.stringify(post.field)));
                            }else { // 添加则更新列表
                            	renderTable();
                            }

                            // 关闭当前窗口
                            layer.close(colletction.index);
                        }
                        else {
                            layui.iziToast.error({
                                message: res.msg,
                            });                               
                        }
                }, 'json');

                return false;                        
            })

        }

    });
</script>
